import { ProjectTag } from '@entity/project';
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component
export class TagComponent extends Vue {

    /** 分工/职位 */
    @Prop({
        default: () => new ProjectTag()
    })
    private tag: ProjectTag;

    /** 是否上色 */
    @Prop({
        default: false
    })
    private colorful: boolean;

    /** tag 下标 */
    @Prop({
        default: -1
    })
    private index: number;

    /** 是否被选中 */
    @Prop({
        default: false
    })
    private selected: boolean;

    /**
     * 当前职位待加入状态下返回 true
     */
    private get tagEmpty(): boolean {
        return this.tag.memberId == -1;
    }

    /**
     * 获取tag的样式
     * 如果没有启用彩色模式, 不做任何处理
     * 彩色模式下
     *  - 被选中的返回蓝色背景
     *  - 已占用职位返回白色背景, 鼠标禁选
     *  - 待加入职位返回白色背景, 黑色字体
     */
    private get tagStyle(): any {
        if (this.colorful) {
            if (this.selected) {
                return {
                    background: 'rgb(63, 169, 255)'
                }
            } else if (this.tagEmpty) {
                return {
                    background: "#EEE",
                    color: "black"
                }
            } else {
                return {
                    background: "#EEE",
                    cursor: 'not-allowed'
                }
            }
        }
    }
}